{{define "title"}}物品兑换 {{end}}
{{define "seo"}}<meta name="keywords" content="{{.setting.SeoKeywords}}">
<meta name="description" content="{{.setting.SeoDescription}}">{{end}}
{{define "content"}}
<div class="row">
    <div class="col-md-9 col-sm-6">
        <div class="sep20"></div>
        
        <div style="border-bottom: 1px solid #e2e2e2;">
            <div class="pull-right" style="margin-top: 8px;">
                <a href="/top/rich" class="tab">社区财富排行榜</a>
                <a href="/balance/add" class="tab">充值</a>
            </div>
            <ol class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li><a href="/balance">账户余额</a></li>
                <li class="active">物品兑换</li>
            </ol>
        </div>

        <div class="page box_white">
            {{if .me.Uid}}
            <div class="cell">
                <p class="c9">当前账户余额</p>
                <div class="balance_area" style="font-size: 24px; line-height: 24px;">
                    {{if .me.Gold}}
                    {{.me.Gold}} <img src="/static/img/gold_48.png" alt="" width="16px">
                    {{end}}
                    {{if .me.Silver}}
                    {{.me.Silver}} <img src="/static/img/silver_48.png" alt="" width="16px">
                    {{end}}
                    {{.me.Copper}} <img src="/static/img/copper_48.png" alt="" width="16px">
                </div>
            </div>
            {{end}}
            <div class="table-responsive">
                <table cellpadding="7" cellspacing="0" border="0" width="100%" class="data table-hover">
                    <tr>
                        <th width="50" class="h">编号</th>
                        <th width="120" class="h">名称</th>
                        <th width="auto" class="h">说明</th>
                        <th width="80" class="h">类型</th>
                        <th width="80" class="h">合作提供方</th>
                        <th width="70" class="h">价格</th>
                        <th width="70" class="h">剩余</th>
                        <th width="150" class="h" style="border-right: none;">操作</th>
                    </tr>
                {{range .gifts}}
                    {{if eq .State 1}}
                    <tr>
                        <td class="d" style="text-align: center;"><small class="c9">{{.Id}}</small></td>
                        <td class="d">{{.Name}}</td>
                        <td class="d">{{noescape .Description}}</td>
                        <td class="d">{{.TypShow}}</td>
                        <td class="d">{{.Supplier}}</td>
                        <td class="d" style="text-align: right;">{{.Price}} 铜币</td>
                        <td class="d" style="text-align: right;">{{.RemainNum}} 个</td>
                        <td class="d" style="border-right: none;">
                        {{if $.me.Uid}}
                            {{if .BuyLimit}}
                            能兑换 {{.BuyLimit}} 个
                            <button class="btn btn-default btn-sm exchange" data-id="{{.Id}}">兑换</button>
                            {{else}}
                            已经兑换过了 <a href="/gift/mine">查看兑换记录</a>
                            {{end}}
                        {{else}}
                            登录后兑换
                        {{end}}
                        </td>
                    </tr>
                    {{end}}
                {{end}}
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="sep20"></div>
        
        {{include "common/my_info.html" .}}
    </div>
</div>
{{end}}
{{define "css"}}
<link rel="stylesheet" type="text/css" href="{{.static_domain}}/static/dist/css/table_data.min.css">
{{end}}
{{define "js"}}
<script type="text/javascript">
$(function(){
    $('.exchange').on('click', function(){
        $.post('/gift/exchange', {gift_id: $(this).data('id')}, function(result){
            if (result.ok) {
                comTip("兑换成功！");
                setTimeout(function(){location.reload();}, 2000);
            } else {
                comTip(result.error);
            }
        });
    });
});
</script>
{{end}}
